<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>字典管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->
        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryDcit" class="demo-form-inline">
            <el-form-item label="字典名称">
                <el-input v-model="queryDcit.dictName" placeholder="字典名称" clearable />
            </el-form-item>
            <el-form-item label="字典类别">
                <el-input v-model="queryDcit.dictType" placeholder="字典类别" clearable />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="queryDcit.dictStatus" placeholder="状态">
                    <el-option label="全部" :value="0" />
                    <el-option label="正常" :value="1" />
                    <el-option label="禁用" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadDicts">搜索</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->
        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button title="新增字典" @click="this.addDictDialogVisible = true" type="primary"><el-icon>
                    <Plus />
                </el-icon></el-button>
            <el-button @click="handlerEditDicts" title="编辑选中字典" type="primary"><el-icon>
                    <EditPen />
                </el-icon></el-button>
            <el-button @click="handlerDeleteDicts" title="删除选中字典" type="primary"><el-icon>
                    <Delete />
                </el-icon></el-button>
        </div>
        <!-- 工具栏结束 -->
        <!-- 表格 开始 -->
        <el-table ref="dictTable" :data="dicts" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="#" property="dictId" />
            <el-table-column align="center" label="字典名称" property="dictName" />
            <el-table-column align="center" label="字典类型" property="dictType">
                <template #default="scope">
                    <el-link type="success" @click="showDictData(scope.row)">
                        {{ scope.row.dictType }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" property="dictStatus">
                <template #default="scope">
                    <!-- scope.row 就是整行数据-->
                    <el-tag v-if="scope.row.dictStatus == 1" class="ml-2" type="success">正常</el-tag>
                    <el-tag v-else class="ml-2" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" :formatter="timeFormatter" property="dictCreateTimeMillis" />
            <el-table-column align="center" label="最后修改时间" :formatter="timeFormatter" property="dictModifyTimeMillis" />
            <el-table-column align="center" label="字典备注" property="dictNotes" />
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row.dictId)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格 结束 -->
        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="dictLimit" :pager-count="dictMaxPage"
            @current-change="changePage" background layout="prev, pager, next" :total="dictTotal" />
        <!-- 分页栏结束 -->

        <!-- 添加字典的弹窗窗体开始-->
        <el-dialog v-model="addDictDialogVisible" title="添加字典" width="600" align-center>
            <!-- 添加用户的表单 -->
            <el-form label-width="100px" :model="newDict" style="max-width: 460px">
                <el-form-item label="字典名称">
                    <el-input v-model="newDict.dictName" />
                </el-form-item>
                <el-form-item label="字典类型">
                    <el-input v-model="newDict.dictType" />
                </el-form-item>
                <el-form-item label="字典备注">
                    <el-input type="textarea" :rows="2" v-model="newDict.dictNots" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddDict">取消</el-button>
                    <el-button type="primary" @click="doAddDict">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加字典的弹窗窗体结束-->
        <!-- 编辑字典的弹窗开始 -->
        <el-dialog v-model="dictEditDrawer" width="30%" align-center>
            <template #header>
                <h4>修改字典类型</h4>
            </template>
            <template #default>
                <div>
                    <!-- 编辑字典的表单 -->
                    <el-form label-width="100px" :model="editDict" style="max-width: 460px">
                        <el-form-item label="字典名称">
                            <el-input v-model="editDict.dictName" />
                        </el-form-item>
                        <el-form-item label="字典类型">
                            <el-input   v-model="editDict.dictType" />
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-radio-group v-model="editDict.dictStatus" class="ml-4">
                                <el-radio :label="1" size="large">正常</el-radio>
                                <el-radio :label="2" size="large">停用</el-radio>                               
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input   v-model="editDict.dictNotes" />
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelEdit">取消</el-button>
                    <el-button type="primary" @click="doDictEdit">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 编辑字典的弹窗结束 -->

        <!-- 字典数据管理的弹窗开始-->
        <el-dialog v-model="dictDataAttr.dictDataManagerDialogVisible" title="字典数据" width="80%" align-center>
            <!-- 工具栏开始 -->
            <div class="flex">
                <el-button title="新增字典数据" @click="this.dictDataAttr.addDictDataDialogVisible = true"
                    type="primary"><el-icon>
                        <Plus />
                    </el-icon></el-button>
                <el-button @click="handlerDataEdits" title="编辑选中字典数据" type="primary"><el-icon>
                        <EditPen />
                    </el-icon></el-button>
                <el-button @click="handlerDataDeletes" title="删除选中字典数据" type="primary"><el-icon>
                        <Delete />
                    </el-icon></el-button>
            </div>
            <!-- 工具栏结束 -->

            <!-- 字典数据表格 开始 -->
            <el-table ref="dictDataTable" :data="dictDataAttr.dictDatas" max-height="800px" stripe="true" border="true"
                style="width: 100%;margin-top: 10px;">
                <el-table-column align="center" type="selection" width="55" />
                <el-table-column align="center" label="#" property="dataId" />
                <el-table-column align="center" label="数据标签" property="dataTag" />
                <el-table-column align="center" label="数据键值" property="dataValue" />
                <el-table-column align="center" label="状态" property="dataStatus">
                    <template #default="scope">
                        <!-- scope.row 就是整行数据-->
                        <el-tag v-if="scope.row.dataStatus == 1" class="ml-2" type="success">正常</el-tag>
                        <el-tag v-else class="ml-2" type="danger">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="创建时间" :formatter="timeFormatter" property="dataCreateTimeMillis" />
                <el-table-column align="center" label="最后修改时间" :formatter="timeFormatter" property="dataModifyTimeMillis" />
                <el-table-column align="center" label="数据备注" property="dataNotes" />
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleDataEdit(scope.row)">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                            @confirm="handleDataDelete(scope.row)" title="您是否要删除这行数据">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 字典数据表格结束 -->



            <!-- 添加字典数据的嵌套弹窗窗体开始-->
            <el-dialog v-model="dictDataAttr.addDictDataDialogVisible" title="添加字典数据" width="600" align-center>
                <!-- 添加用户的表单 -->
                <el-form label-width="100px" :model="dictDataAttr.newData" style="max-width: 460px">
                    <el-form-item label="字典类型">
                        <el-input readonly v-model="currDict.dictType" />
                    </el-form-item>
                    <el-form-item label="字典数据标签">
                        <el-input v-model="dictDataAttr.newData.dataTag" />
                    </el-form-item>
                    <el-form-item label="字典数据键值">
                        <el-input v-model="dictDataAttr.newData.dataValue" />
                    </el-form-item>
                    <el-form-item label="字典数据排序">
                        <el-input v-model="dictDataAttr.newData.dataOrder" type="number" />
                    </el-form-item>
					<el-form-item label="状态">
						<el-radio-group v-model="dictDataAttr.newData.dataStatus" class="ml-4">
							<el-radio label="1" size="large">正常</el-radio>
							<el-radio label="2" size="large">停用</el-radio>
						</el-radio-group>
					</el-form-item>	
                    <el-form-item label="字典数据备注">
                        <el-input type="textarea" :rows="2" v-model="dictDataAttr.newData.dataNotes" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="cancelAddData">取消</el-button>
                        <el-button type="primary" @click="doAddData">
                            提交
                        </el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 添加用户的弹窗窗体结束-->
			<!-- 编辑字典数据的嵌套弹窗窗体开始-->
			<el-dialog v-model="dictDataAttr.editDictDataDialogVisible" title="添加字典数据" width="600" align-center>
			    <!-- 添加用户的表单 -->
			    <el-form label-width="100px" :model="dictDataAttr.editDatas" style="max-width: 460px">
			        <el-form-item label="字典类型">
			            <el-input readonly v-model="currDict.dictType" />
			        </el-form-item>
			        <el-form-item label="字典数据标签">
			            <el-input v-model="dictDataAttr.editDatas.dataTag" />
			        </el-form-item>
			        <el-form-item label="字典数据键值">
			            <el-input v-model="dictDataAttr.editDatas.dataValue" />
			        </el-form-item>
			        <el-form-item label="字典数据排序">
			            <el-input v-model="dictDataAttr.editDatas.dataOrder" type="number" />
			        </el-form-item>
					<el-form-item label="状态">
						<el-radio-group v-model="dictDataAttr.editDatas.dataStatus" >
							<el-radio label="1" size="large">正常</el-radio>
							<el-radio label="2" size="large">停用</el-radio>
						</el-radio-group>
					</el-form-item>	
			        <el-form-item label="备注">
			            <el-input type="textarea" :rows="2" v-model="dictDataAttr.editDatas.dataNotes" />
			        </el-form-item>
			    </el-form>
			    <template #footer>
			        <span class="dialog-footer">
			            <el-button @click="cancelEditData">取消</el-button>
			            <el-button type="primary" @click="doEditData">
			                提交
			            </el-button>
			        </span>
			    </template>
			</el-dialog>
			<!-- 编辑字典数据的弹窗窗体结束-->
        </el-dialog>
        <!-- 字典数据管理的弹窗结束-->
    </div>
</template>
<script>
import dictRequest from '../../../api/dict-api.js';
import tools from '../../../util/tools.js';
import dictDataRequest from '../../../api/dict-data-api.js';
export default {
    data() {
        return {
            queryDcit: {}, // 分装查询字典条件的字典对象
            dicts: [],// 字典数据列表
            dictCurrPage: 1, // 字典分页的当前页码
            dictLimit: 10, // 字典分页的每页大小
            dictTotal: 0, // 字典列表的总条数
            dictMaxPage: 1,// 字典列表的最大页码

            // 新增字典相关属性
            addDictDialogVisible: false,// 新增字典的弹窗标志
            newDict: {},// 封装新增的字典信息
            currDict:{},// 保存正在操作的字典信息

            //编辑字典相关属性
            dictEditDrawer: false,
            editDict: {},

            // 字典数据管理相关属性
            dictDataAttr: {
                dictDataManagerDialogVisible: false,//字典数据管理的弹窗标志 
                addDictDataDialogVisible: false,// 新增字典数据的弹窗标志
                dictDatas: [],// 字典数据列表
                newData:{},// 封装新增字典数据对象
				
				editDictDataDialogVisible: false,	//修改字典数据的弹窗标志
				editDatas: {},					//修改字典数据对象
            }
        }
    },
    methods: {
		/**
		 * 字典数据行编辑取消
		 */
		cancelEditData(){
			 this.dictDataAttr.editDictDataDialogVisible = false;
			 this.dictDataAttr.editDatas = {};
		},
		
		/**
		 * 字典数据行编辑确定
		 */
		doEditData(){
            // console.log("开始编辑")
            // 提交editUser即可
            dictDataRequest.edit(this.dictDataAttr.editDatas, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改字典数据成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.dictDataAttr.editDictDataDialogVisible = false;
                    // 重新加载数据
                    this.loadDictData(this.currDict.dictId);
                    // 将editUser制空
                    this.dictDataAttr.editDatas = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '字典数据重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 确定编辑字典
         */
        doDictEdit() {
            console.log("开始编辑")
            // 提交editUser即可
            dictRequest.edit(this.editDict, res => {
                console.log("*******")
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '修改字典成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.dictEditDrawer = false;
                    // 重新加载数据
                    this.loadDicts();
                    // 将editUser制空
                    this.editDict = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '字典重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 取消字典编辑
         */
        cancelEdit() {
            // 将编辑的用户制空
            this.editDict = {};
            // 关闭抽屉弹窗
            this.dictEditDrawer = false;
        },
        /**
         * 新增字典数据事件
         */
        doAddData(){
            // 将记录的字典编号保存到字典数据中
            this.dictDataAttr.newData.dictId = this.currDict.dictId;
            console.log(this.dictDataAttr.newData);
			dictDataRequest.save(this.dictDataAttr.newData, res=>{
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddData();
                    // 重新加载数据
                    this.loadDictData(this.currDict.dictId);// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
            this.dictDataAttr.addDictDataDialogVisible = false;
        },
        /**
         * 取消字典数据新增操作
         */
        cancelAddData(){
            this.dictDataAttr.addDictDataDialogVisible = false;
            this.dictDataAttr.newData = {};
        },
        /**
         * 点击字典类型的事件，显示字典数据管理窗体
         * @param {*} row 
         */
        showDictData(row) {
            this.dictDataAttr.dictDataManagerDialogVisible = true;
            this.loadDictData(row.dictId);
            // 记录整行数据
            this.currDict = row;
        },
        /**
         * 加载字典数据列表
         * @param {*} dictId 
         */
        loadDictData(dictId) {
            // 加载数据
            dictDataRequest.list(dictId, res => {
                this.dictDataAttr.dictDatas = res.data;
            });
        },
        /**
         * 字典数据工具栏删除按钮事件
         */
        handlerDataDeletes() {			
			    let table = this.$refs.dictDataTable;
			    let selectionRows = table.getSelectionRows();
			    if(selectionRows == undefined || selectionRows.length == 0){
			        this.$message({
			            message:"您没有选中任何行",
			            type:"info"
			        });
			    }
			    else{
			    let dataIds = [];
			    selectionRows.forEach(item => {
			        dataIds.push(item.dataId);
			    });
			    dictDataRequest.deletes(dataIds,res=>{
			        this.$message({
			            type:"success",
			            message:"您成功删除了" + res.msg + "个字典数据"
			        });
			        this.loadDictData(this.currDict.dictId);
			    });
			}
			
		},
        /**
         * 字典数据工具栏编辑按钮事件
         */
        handlerDataEdits() { },
        /**
         * 字典数据列表的行删除事件
         * @param {*} row 
         */
        handleDataDelete(row) {		
				    console.log(row.dataId);
				    dictDataRequest.delete(row.dataId,res=>{
				        if(res.code == 200){
				            this.$message({
				                type:'success',
				                message:'删除成功'
				            });
				            this.loadDictData(this.currDict.dictId);    //************
				        }else{
				            this.$message({
				                type:'error',
				                message:'删除失败'
				            })
				        }
				    })
				
			
        },
        /**
         * 字典数据列表行编辑事件
         */
        handleDataEdit(row) {
			    dictDataRequest.selectById(row.dataId, res => {
			        this.dictDataAttr.editDictDataDialogVisible = true;
			        this.dictDataAttr.editDatas = res.data;
			    })
			    
			
        },
        /**
         * 新增字典的提交按钮事件
         */
        doAddDict() {
            // 数据校验：略
            // 提交数据
            dictRequest.save(this.newDict, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddDict();
                    // 重新加载数据
                    this.loadDicts();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 取消新增字典的按钮事件
         */
        cancelAddDict() {
            // 关闭窗体
            this.addDictDialogVisible = false;
            // 清空newDict
            this.newDict = {};
        },
        /**
         * 行删除事件
         * @param {} row 
         */
        handleDelete(id) {
            console.log(id);
            dictRequest.delete(id,res=>{
                if(res.code == 200){
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    });
                    this.loadDicts();
                }else{
                    this.$message({
                        type:'error',
                        message:'删除失败'
                    })
                }
            })
        },
        /**
         * 行编辑事件
         * @param {*} row 
         */
        handleEdit(row) {
            dictRequest.selectById(row.dictId, res => {
                this.dictEditDrawer = true;
                this.editDict = res.data;
            })
            
        },
        /**
         * 时间毫秒数转换为对应的字符串
         * @param {*} time 
         */
        timeFormatter(row, column, time) {
            return tools.timeMillisToString(time);
        },
        /**
         * 工具栏-选中删除按钮事件
         */
        handlerDeleteDicts() {
            let table = this.$refs.dictTable;
            let selectionRows = table.getSelectionRows();
            if(selectionRows == undefined || selectionRows.length == 0){
                this.$message({
                    message:"您没有选中任何行",
                    type:"info"
                });
            }
            let dictIds = [];
            selectionRows.forEach(dict => {
                dictIds.push(dict.dictId);
            });
            dictRequest.deletes(dictIds,res=>{
                this.$message({
                    type:"success",
                    message:"您成功删除了" + res.msg + "个用户"
                });
                this.loadDicts();
            })
        },
        /**
         * 工具栏-选中编辑按钮事件
         */
        handlerEditDicts() {

        },
        /**
         * 字典列表的翻页函数
         * @param {} value  最新页码
         */
        changePage(value) {
            this.dictCurrPage = value;
            this.loadDicts();
        },
        /**
         * 加载字典数据
         */
        loadDicts() {
            dictRequest.list(this.dictCurrPage, this.dictLimit, this.queryDcit, res => {
                // 设置数据
                this.dicts = res.data.list;
                this.dictTotal = res.data.total;
                this.dictMaxPage = res.data.pages;
            });
        }
    },
    mounted() {
        // 默认加载字典数据列表
        this.loadDicts();
    }
}
</script>